<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.contain{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			canvas{
				/*background: cornflowerblue;*/
			}
		</style>
	</head>
	<body>
		<div class="contain">
			<canvas id="Canvas" width="600px" height="600px"></canvas>
		</div>
	</body>
	<script type="text/javascript">
		
		window.onload=function(){
			let ocanvas=document.getElementById("Canvas");
			let pen=ocanvas.getContext("2d");
			//console.dir(pen);
			
//画柱体		
			
			pen.beginPath();
			pen.strokeStyle="rgb(18,135,178)";
			pen.fillStyle="rgb(18,135,178)";
			pen.lineWidth=5;
			
			//pen.strokeRect(150,150,50,300);
			//pen.strokeRect(400,150,50,300);
			
			
			pen.strokeRect(150,75,50,375);
			pen.strokeRect(400,150,50,375);
			
			pen.fillRect(150,75,50,375);
			pen.fillRect(400,150,50,375);
			
			
			//使用循环填充但后面会出现问题
			/*for(var i=0;i<=50;i+=5)
			{
				pen.moveTo(150+i,75);
				pen.lineTo(150+i,450);
			}
			
			for(i=0;i<=50;i+=5)
			{
				pen.moveTo(400+i,150);
				pen.lineTo(400+i,450);
			}*/
			
			pen.closePath();
			
//画箭头
			
			//左边
			//参考数值
			//pen.strokeRect(150,150,50,300);
			
			pen.lineWidth=50;
			pen.moveTo(175,500);
			pen.lineTo(100,350);
			pen.moveTo(175,500);
			pen.lineTo(250,350);
			pen.arc(175,500,1,0*Math.PI,1*Math.PI);
			
			
			//右边
			//参考数值
			//pen.strokeRect(400,150,50,300);
			
			pen.moveTo(425,100);
			pen.lineTo(350,250);
			pen.moveTo(425,100);
			pen.lineTo(500,250);
			pen.arc(425,100,1,1*Math.PI,0*Math.PI);
			
			pen.stroke();	
		}
	</script>
</html>
